<template>
	<view class="page">
		<!-- 顶部：标题 -->
		<view class="header">
			<view class="title">本月排行榜</view>
			<view class="sub">已统计：{{ total }} 人</view>
		</view>

		<!-- 列表 -->
		<scroll-view scroll-y class="list" @scrolltolower="onReachBottom">
			<view v-for="(item, idx) in displayList" :key="item.id || idx" class="card-wrap">
				<wd-card class="rank-card" :use-footer-slot="false">
					<!-- 上半：基础信息 -->
					<view class="row top">
						<view class="rank-badge" :class="badgeClass(idx + 1)">
							<view class="ring"></view>
							<text class="num">{{ idx + 1 }}</text>
						</view>

						<view class="info">
							<view class="name one-line">{{ item.name }}</view>
							<view class="meta one-line">
								<text class="dot" />
								<text class="text">{{ item.college }}</text>
								<text class="sep">·</text>
								<text class="text">{{ item.className }}</text>
							</view>
						</view>

						<view class="stats">
							<view class="steps">{{ formatSteps(item.steps) }}</view>
							<view class="steps-label">步数</view>
						</view>
					</view>

					<!-- 更细的分割线，颜色更淡 -->
					<wd-divider dashed hairline :style="{ '--wd-divider-color': '#e7eceb' }" />

					<!-- 下半：步数/排名 -->
					<view class="row bottom">
						<view class="kv">
							<view class="k">步数</view>
							<view class="v">{{ formatSteps(item.steps) }}</view>
						</view>
						<view class="kv">
							<view class="k">排名</view>
							<view class="v">第 {{ idx + 1 }} 名</view>
						</view>
					</view>
				</wd-card>
			</view>

			<view class="end-tip" v-if="!hasMore && displayList.length">没有更多了</view>
			<view class="empty" v-if="!loading && !displayList.length">暂无数据</view>
			<view class="loading" v-if="loading">加载中…</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const rawList = ref([])
	const page = ref(1)
	const pageSize = 20
	const hasMore = ref(true)
	const loading = ref(false)

	const sorted = computed(() => {
		return [...rawList.value].sort((a, b) => {
			if (b.steps !== a.steps) return b.steps - a.steps
			return (a.name || '').localeCompare(b.name || '')
		})
	})
	const displayList = computed(() => sorted.value)
	const total = computed(() => displayList.value.length)

	async function fetchRank({
		pageNo = 1,
		size = pageSize
	} = {}) {
		// —— 模拟数据（对接后端时替换）——
		const base = (pageNo - 1) * size
		const fake = Array.from({
			length: size
		}, (_, i) => {
			const n = base + i + 1
			return {
				id: 'u-' + n,
				name: n <= 3 ? ['张三', '李四', '王五'][n - 1] : `同学${n}`,
				college: ['软件工程学院', '大数据学院', '计算机与人工智能学院'][n % 3],
				className: `23级${(n % 6) + 1}班`,
				steps: 30000 + Math.max(0, (size * 20 - n) * 187) + (n % 97) * 23
			}
		})
		if (pageNo >= 3) fake.splice(10)
		await new Promise(r => setTimeout(r, 250))
		return fake
	}

	async function loadInitial() {
		page.value = 1
		hasMore.value = true
		rawList.value = []
		await loadMore()
	}
	async function loadMore() {
		if (!hasMore.value || loading.value) return
		loading.value = true
		try {
			const list = await fetchRank({
				pageNo: page.value,
				size: pageSize
			})
			if (list.length < pageSize) hasMore.value = false
			rawList.value = rawList.value.concat(list)
			page.value += 1
		} finally {
			loading.value = false
		}
	}

	function onReachBottom() {
		loadMore()
	}

	onPullDownRefresh(async () => {
		await loadInitial()
		uni.stopPullDownRefresh()
	})

	function formatSteps(n) {
		if (n == null) return '-'
		if (n >= 100000) return `${Math.floor(n / 1000) / 10}万`
		return `${n}`
	}

	function badgeClass(rank) {
		if (rank === 1) return 'gold'
		if (rank === 2) return 'silver'
		if (rank === 3) return 'bronze'
		return 'normal'
	}

	onMounted(loadInitial)
</script>

<style scoped>
	.page {
		min-height: 100vh;
		/* 保留你的渐变背景 */
		background: linear-gradient(to bottom, #c4ffd5 0%, #f5f5f5 35%, #f5f5f5 100%);
		/* 统一页面留白：左右 14，顶部 12 底部 20（与底部 Tab 不拥挤） */
		padding: 12px 14px 20px;
		box-sizing: border-box;
	}

	/* ===== 顶部标题区 ===== */
	.header {
		padding: 6px 2px 4px;
	}

	.title {
		font-size: 18px;
		font-weight: 700;
		color: #0f9d58;
		/* 主题深绿 */
		letter-spacing: 0.2px;
	}

	.sub {
		margin-top: 4px;
		font-size: 12px;
		color: #607d8b;
	}

	/* ===== 列表区 ===== */
	.list {
		height: calc(100vh - 72px);
		padding-bottom: 8px;
		/* 避开最后一张卡贴底的压迫感 */
		box-sizing: border-box;
	}

	/* 卡片外间距：上下 10、左右跟随 page 的 14 */
	.card-wrap {
		margin-top: 10px;
	}

	/* 卡片本体：更大圆角+柔和阴影+卡片内容的“内边距”调优 */
	.rank-card {
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 6px 14px rgba(16, 185, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03);
		background: #fff;
	}

	/* 行：统一左右内边距；上半稍大、下半略小 */
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.row.top {
		padding: 12px 12px 2px;
	}

	.row.bottom {
		padding: 8px 10px 10px;
		justify-content: space-around;
	}

	/* ===== 排名圆徽章：加“细环”更精致，且调大与头像区间距 ===== */
	.rank-badge {
		position: relative;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		margin-right: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e8f5e9;
		color: #0f9d58;
		font-weight: 700;
		font-size: 14px;
	}

	.rank-badge .ring {
		content: "";
		position: absolute;
		inset: -2px;
		border-radius: 50%;
		border: 2px solid rgba(7, 193, 96, 0.16);
	}

	.rank-badge .num {
		position: relative;
		z-index: 1;
	}

	.rank-badge.gold {
		background: #ffeec2;
		color: #b8860b;
	}

	.rank-badge.silver {
		background: #f1f1f1;
		color: #7a7a7a;
	}

	.rank-badge.bronze {
		background: #ffe1c7;
		color: #a55417;
	}

	/* ===== 文本信息区：更紧凑、更好截断 ===== */
	.info {
		flex: 1;
		min-width: 0;
	}

	.name {
		font-size: 16px;
		font-weight: 700;
		color: #1f2937;
	}

	.meta {
		display: flex;
		align-items: center;
		margin-top: 2px;
		font-size: 12px;
		color: #6b7280;
	}

	.meta .dot {
		width: 6px;
		height: 6px;
		background: #07c160;
		border-radius: 50%;
		margin-right: 6px;
	}

	.meta .sep {
		padding: 0 4px;
		color: #9aa0a6;
	}

	.one-line {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* ===== 右侧步数摘要：更靠右，数值更醒目 ===== */
	.stats {
		min-width: 84px;
		text-align: right;
	}

	.steps {
		font-size: 18px;
		font-weight: 800;
		color: #0f9d58;
		line-height: 1.1;
	}

	.steps-label {
		margin-top: 4px;
		font-size: 11px;
		color: #8aa2a8;
	}

	/* ===== 分割线（通过内联 CSS 变量调色） ===== */
	:deep(.wd-divider) {
		margin: 8px 10px;
	}

	/* ===== 下半 Key-Value：字重对比更强 ===== */
	.kv {
		flex: 1;
		text-align: center;
	}

	.k {
		font-size: 12px;
		color: #6b7280;
	}

	.v {
		margin-top: 2px;
		font-size: 16px;
		font-weight: 800;
		color: #111827;
	}

	/* ===== 状态区 ===== */
	.loading,
	.end-tip,
	.empty {
		text-align: center;
		color: #7c8792;
		font-size: 13px;
		padding: 12px 0;
	}
</style>